{% extends 'layout.html' %}

{% block main %}

<div class="page-header">
    <h1>
        产品综合管理
        <button class="btn btn-sm btn-success" onclick="create()"><i class="icon-ok"></i>新增</button>
        <div style="display: inline-block; margin-bottom: 10px">
            <input type="button" class="btn btn-sm btn-info" value="批量导入产品" id="button" onclick="importData()">
        </div>
        <div style="display: inline-block; margin-bottom: 10px">
            <input type="button" class="btn btn-sm btn" value="批量导出产品" id="button" onclick="exportData()">
        </div>
    </h1>
</div><!-- /.page-header -->
<div class="row">
    <div class="col-xs-12">
        <div id="dialog-alert" class="hide">
            <div class="space-6"></div>
            <p id="dialog-text" class="bigger-110 bolder center grey">
                <i class="icon-hand-right blue bigger-120"></i>
            </p>
        </div><!-- #dialog-confirm -->
        <div>
            <nav class="navbar-default" style="border: 1px solid transparent;border-color: #e7e7e7;">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">产品类型</span>
                        </div>
                        <div class="nav navbar-nav form-group">
                            <div class="navbar-form navbar-left">
                                <div class="form-group">
                                    <select id="product_id" style="width:150px;" class="form-control" >
                                        <option value="-1">所有产品类型</option>
                                        {% for product in product_list %}
                                        <option value="{{product.product_id}}">{{product.product_type}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">产品型号</span>
                        </div>
                        <div class="nav navbar-nav form-group">
                            <div class="navbar-form navbar-left">
                                <div class="form-group">
                                    <select id="product_model" style="width:150px;" class="form-control">
                                        <option value="-1">所有产品型号</option>
                                        {% for line in product_list%}
                                        <option value="型号">{{line.product_model}}</option>
                                        {% endfor %}
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="navbar-header" style="margin-right: 18px;">
                            <span class="navbar-brand">产品型号</span>
                        </div>
                        <div class="navbar-form navbar-left">
                            <div class="form-group">
                                <input id="search_project_model" style="width:150px;" type="text" class="form-control" placeholder="模糊搜索产品型号">
                            </div>
                            <button id='btn_search' class="btn btn-sm btn-primary">查询</button>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>

        <div class="table-header">
            产品列表
        </div>
        <div class="table-responsive">
            <table id="tables" class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>产品编号</th>
                    <th>产品类型</th>
                    <th>品牌</th>
                    <th>产品型号</th>
                    <th>产地</th>
                    <th>上线时间</th>
                    <th>更新时间</th>
                    <th>产品状态</th>
                </tr>
                </thead>
                <tbody>
                    {% for line in product_list %}
                        <tr>
                            <td>{{line.product_id}}</td>
                            <td>{{line.product_number}}</td>
                            <td>{{line.product_type}}</td>
                            <td>{{line.product_brand}}</td>
                            <td>{{line.product_model}}</td>
                            <td>{{line.product_alias}}</td>
                            <td>{{line.created_time}}</td>
                            <td>{{line.update_time}}</td>
                            <td>{{line.status}}</td>
                        </tr>
                    {% endfor %}
                    <div class="pagination">
                        <span class="step-links">
                             {% if product_list.has_previous %}
                             <a href="?page={{ product_list.previous_page_number }}">previous</a>
                             {% endif %}
                             <span class="current">
                             Page {{ product_list.number }} of {{ product_list.paginator.num_pages }}.
                             </span>
                             {% if product_list.has_next %}
                             <a href="?page={{ product_list.next_page_number }}">next</a>
                             {% endif %}
                        </span>
                    </div>
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script src="/static/js/chosen.jquery.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/jquery.dataTables.bootstrap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="/static/js/jquery.ui.touch-punch.min.js"></script>
<script src="/static/js/all-config.js"></script>
<!--<script>-->
    <!--var create = function(ciId){-->
        <!--window.open("/cmdb/ci/add?type=product");-->
    <!--};-->
    <!--var edit = function(ciId){-->
        <!--window.open("/cmdb/ci/edit?type=product&id=" + ciId);-->
    <!--};-->
    <!--var showRelation = function(ciId){-->
        <!--window.open("/cmdb/relation?type=product&id=" + ciId);-->
    <!--};-->
    <!--var deleteInfo = function(ciId){-->
        <!--ret = window.confirm("确认要删除订单?")-->
        <!--if (!ret) {-->
            <!--return;-->
        <!--}-->

        <!--var saveData = {"id": ciId};-->
        <!--$.ajax({-->
            <!--url: "/cmdb/ci/edit/delete",-->
            <!--type: "POST",-->
            <!--data: JSON.stringify(saveData),-->
            <!--contentType: "application/json; charset=utf-8",-->
            <!--dataType: "json",-->
            <!--success: function (data) {-->
                <!--if (data.redirect) {-->
                    <!--window.location.href = data.redirect;-->
                    <!--return;-->
                <!--}-->
                <!--if (data.success){-->
                    <!--$('#tables').DataTable().fnDraw();-->
                    <!--alert("删除成功");-->
                <!--}else{-->
                    <!--alert("删除失败");-->
                <!--}-->
            <!--}-->
        <!--});-->
    <!--};-->
    <!--$(document).ready(function () {-->

        <!--var tableConfig = jQuery.extend(DATATABLE_CONFIG, {-->
            <!--"aoColumns": [-->
                <!--{-->
                    <!--"mDataProp": "_id",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"mDataProp": "product_name",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"mDataProp": "product_owner",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"mDataProp": "product_owner_ldap",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"mDataProp": "product_owner_email",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"mDataProp": "product_designation",-->
                    <!--"sWidth": "null"-->
                <!--},-->
                <!--{-->
                    <!--"sWidth": "180px"-->
                <!--}-->
            <!--],-->
            <!--"aoColumnDefs": [-->
                <!--{-->
                    <!--"aTargets": [6],  // this your column of action-->
                    <!--"mData": null,-->
                    <!--"mRender": function (data, type, full) {-->
                        <!--var result = '<div style="width:180px;" class="visible-md visible-lg hidden-sm hidden-xs btn-group">';-->
                        <!--result += '<button class="btn btn-xs btn-success" onclick="showRelation([' + full._id + '], 0)">' +-->
                                    <!--'<i class="icon-edit"></i>关联关系' +-->
                                    <!--'</button>';-->
                        <!--result += '<button class="btn btn-xs btn-primary" onclick="edit([' + full._id + '], 0)">' +-->
                                    <!--'<i class="icon-edit"></i>编辑' +-->
                                    <!--'</button>';-->
                        <!--result += '<button class="btn btn-xs btn-danger" onclick="deleteInfo(\'' + full._id + '\')">' +-->
                                    <!--'<i class="icon-ban-circle bigger-120"></i>删除' +-->
                                    <!--'</button>' +-->
                                    <!--'</div>';-->
                        <!--return result;-->
                    <!--}-->
                <!--}-->
            <!--],-->
            <!--"sAjaxSource": "getList",-->
            <!--"fnServerParams": function (aoData) {-->
                <!--aoData.push({-->
                    <!--"name": "bu_id",-->
                    <!--"value": $('#bu_id').val()-->
                <!--});-->
            <!--},-->
            <!--"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {-->
                <!--oSettings.jqXHR = $.ajax( {-->
                    <!--"dataType": 'json',-->
                    <!--"type": "POST",-->
                    <!--"url": sSource,-->
                    <!--"data": aoData,-->
                    <!--//"success": fnCallback,-->
                    <!--"success": function(data){-->
                        <!--if (data.redirect) {-->
                            <!--window.location.href = data.redirect;-->
                            <!--return;-->
                        <!--}-->
                        <!--fnCallback(data.data);-->
                    <!--},-->
                    <!--"error": function (e) {-->
                        <!--showDialog("查询失败", e.message);-->
                    <!--}-->
                <!--});-->
            <!--}-->
        <!--});-->
        <!--$('#bu_id option:first').attr('selected','selected');-->
        <!--$('#tables').dataTable(tableConfig);-->
        <!--$( "#bu_id" ).change(function() {-->
            <!--$('#tables').DataTable().fnSettings()._iDisplayStart = 0;-->
            <!--$('#tables').DataTable().fnDraw();-->
        <!--});-->
    <!--});-->
<!--</script>-->
{% endblock %}